<ion-header>

  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button routerLink="/home">
        <ion-icon name="chevron-back-outline"></ion-icon>
        班课
      </ion-button>
    </ion-buttons>
    <ion-title style="padding-left: 25%;">成员列表</ion-title>
  </ion-toolbar>

  <ion-toolbar>
    <ion-grid>

      <ion-row>
        <ion-col>
          <ion-button (click)="gotosign()" style="padding-inline-start:30%">
            <ion-icon slot="icon-only" name="today-outline"></ion-icon>
          </ion-button>
        </ion-col>
        <ion-col>
          <ion-button (click)="clickedStar()" style="padding-inline-start:30%">
            <ion-icon slot="icon-only" name="heart-circle-outline"></ion-icon>
          </ion-button>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col style="padding-inline-start:15%">
          <ion-label (click)="gotosign()">{{text}}</ion-label>
        </ion-col>
        <ion-col style="padding-inline-start:15%"> 
          <ion-label>心意卡片</ion-label>
        </ion-col>
      </ion-row>

  </ion-grid>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-text style="padding-inline-start: 7%;">成员总数</ion-text>
  <ion-text style="padding-inline-start: 57%;">{{totalNumber}}人</ion-text>
  <ion-list>

    <ion-item *ngFor="let item of member">
      <ion-thumbnail slot="start">
        <img src="/assets/img/course.jpg">
      </ion-thumbnail>
      <ion-label>
        <h3>{{item.peName}}</h3>
        <p> 学号: {{item.peNumber}}</p>
        <p style="color:orangered">经验值: {{item.value}}</p>
      </ion-label>
    </ion-item>

  </ion-list>
</ion-content>
